<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="auto">
                <LeftMenu></LeftMenu>
            </el-aside>
            <el-container>
                <el-header>
                    <TopMenu></TopMenu>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import LeftMenu from '../components/LeftMenu.vue'
import TopMenu from '../components/TopMenu.vue'
import { useStore } from 'vuex';
const store = useStore()
</script>
<style lang="scss" scoped>
.common-layout {
    .el-aside {
        background-color: #545c64;
    }

    .el-header {
        line-height: 70px;

        .el-icon {
            font-size: 20px;
        }
    }

    .el-main {
        background-color: gainsboro;
    }
}

// 高度100%
.el-aside,
.el-container,
.common-layout,
#app,
body,
html {
    height: 100%;
}
</style>